<template>
  <n-space vertical size="large">
    <n-layout has-sider>
      <n-layout-sider content-style="padding: 24px;">
        海淀桥
      </n-layout-sider>
      <n-layout>
        <n-layout-header>颐和园路</n-layout-header>
        <n-layout-content content-style="padding: 24px;height:100%">
          平山道
        </n-layout-content>
        <n-layout-footer>成府路</n-layout-footer>
      </n-layout>
    </n-layout>
  </n-space>
</template>
 
<script setup>
import {
  NCard, NForm, NFormItem,
  NButton, NCheckbox, NInput,
  NIcon, NSpace, NSwitch, NLayout,
  NLayoutHeader, NMenu, NLayoutSider,
  NLayoutFooter,NLayoutContent
} from 'naive-ui'
</script>
 
<style lang='less' scoped>
.n-layout-header,
.n-layout-footer {
  background: rgba(128, 128, 128, 0.2);
  padding: 24px;
}

.n-layout-sider {
  background: rgba(128, 128, 128, 0.3);
}

.n-layout-content {
  background: rgba(128, 128, 128, 0.4);
}
</style>